<script setup name="login-page">
// import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue';
import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router';
import MyFooter from '../../components/MyFooter/index.vue';
const store = useStore();
const router = useRouter();

onActivated(() => {
  console.log('123');
});
onDeactivated(() => {
  console.log('456');
});
// 登录方式切换
const loginVisible = ref(true);
// 表单数组
const ruleForm = reactive({
  pass: localStorage.getItem('password') || '',
  name: localStorage.getItem('name') || '',
  account: localStorage.getItem('account') || '',
  code: '123456',
  checkbox: localStorage.getItem('checkbox') === 'true' || false,
  type: false,
});

const ruleFormRef = ref();
// 表单验证
const validatePass = (rule, value, callback) => {
  if (value.trim() === '') {
    callback(new Error('请输入密码'));
  } else if (value.length < 6 || value.length > 20) {
    callback(new Error('密码6-24个字符'));
  } else {
    if (ruleForm.pass !== '') {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField('checkPass', () => null);
    }
    callback();
  }
};
const validateAccount = (rule, value, callback) => {
  const telReg = ref(/^1[3-9]\d{9}$/);
  if (value === '') {
    callback(new Error('请输入手机号'));
  } else if (!telReg.value.test(value)) {
    callback(new Error('手机号格式不对'));
  } else {
    if (ruleForm.account !== '') {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField('checkPass', () => null);
    }
    callback();
  }
};
const validateCode = (rule, value, callback) => {
  const codReg = ref(/^[1-9]{6}$/);
  if (value === '') {
    callback(new Error('请输入验证码'));
  } else if (!codReg.value.test(value)) {
    callback(new Error('验证码6个数字'));
  } else {
    if (ruleForm.code !== '') {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField('checkPass', () => null);
    }
    callback();
  }
};
const validateName = (rule, value, callback) => {
  const nameReg = ref(/^[a-zA-Z].{5,20}$/);
  if (value === '') {
    callback(new Error('请输入用户名'));
  } else if (!nameReg.value.test(value)) {
    callback(new Error('字母开头且6-26个字符'));
  } else {
    if (ruleForm.name !== '') {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField('checkPass', () => null);
    }
    callback();
  }
};

const validateType = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入用户名'));
  }
};
// 表单验证数组
const rules = reactive({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  name: [{ validator: validateName, trigger: 'blur' }],
  account: [{ validator: validateAccount, trigger: 'blur' }],
  code: [{ validator: validateCode, trigger: 'blur' }],
  type: [{ validator: validateType, trigger: 'change' }],
});
// 切换登录方式
function onLoginShow() {
  loginVisible.value = !loginVisible.value;
}
// 发送短信
async function onSendInfo() {
  const res = await store.dispatch('user/updateCode', {
    mobile: ruleForm.account,
  });
  if (!res.success) {
    ElMessage({
      message: res.msg,
      type: 'error',

    });
  } else {
    ElMessage({
      message: res.msg,
      type: 'success',
    });
  }
}

// 登录
// console.log(loginVisible.value);
async function onLogin() {
  // router.push('/');
  // console.log(loginVisible.value);
  if (loginVisible.value) {
    if (ruleForm.checkbox) {
      localStorage.setItem('name', ruleForm.name);
      localStorage.setItem('password', ruleForm.pass);
    }
    const res = await store.dispatch('user/login', {
      account: ruleForm.name,
      password: ruleForm.pass,
    });
    if (!res.success) {
      ElMessage({
        message: res.msg,
        type: 'error',

      });
    } else {
      router.push('/home');
      ElMessage({
        message: res.msg,
        type: 'success',
      });
    }
  } else {
    if (ruleForm.checkbox) {
      localStorage.setItem('account', ruleForm.account);
    }
    const res = await store.dispatch('user/codeLogin', {
      mobile: ruleForm.account,
      code: ruleForm.code,
    });
    if (!res.success) {
      ElMessage({
        message: res.msg,
        type: 'error',
      });
    } else {
      router.push('/home');
      ElMessage({
        message: res.msg,
        type: 'success',
      });
    }
  }
  localStorage.setItem('checkbox', ruleForm.checkbox);
}

</script>

<template>
  <div class="common-layout">
    <header>
      <h1 class="logo-warp">
        <a href="#/home">
          <img src="http://erabbit.itheima.net/img/logo.0940ebb5.png" class="logo">
        </a>
      </h1>
      <div class="home-page-warp">
        <div class="login">欢迎登录</div>
        <a href="#/home" class="home-page">
          进入网站首页
          <el-icon color="#82c8b4" class="icon"><DArrowRight /></el-icon>
        </a>
      </div>
    </header>
    <main>
      <el-card class="box-card" :body-style="{ padding: '0px' }">
        <template #header>
          <div class="card-header">
            <span style="color: #5bb79c">账户登录</span>
            <span class="halving-line">|</span>
            <span class="button" text>扫码登录</span>
          </div>
        </template>
        <div class="card-main">
          <div class="info-login" @click="onLoginShow" v-if="loginVisible">
            <el-icon class="icon info-icon"><User /></el-icon>
            <span>使用账号登录</span>
          </div>
          <div class="info-login" @click="onLoginShow" v-else>
            <el-icon class="icon info-icon"><Message /></el-icon>
            <span>使用短信登录</span>
          </div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleFormRef"
          >
            <el-form-item
              prop="name"
              v-show="loginVisible"
            >
              <el-input
                v-model="ruleForm.name"
                prefix-icon="User"
                class="inp"
                placeholder="请输入用户名"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              prop="account"
              v-show="!loginVisible"
            >
              <el-input
                v-model="ruleForm.account"
                prefix-icon="User"
                class="inp"
                placeholder="请输入手机号"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              prop="pass"
              v-show="loginVisible"
            >
              <el-input
                v-model="ruleForm.pass"
                type="password"
                prefix-icon="Lock"
                class="inp"
                placeholder="请输入密码"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              prop="code"
              v-show="!loginVisible"
            >
              <el-input
                v-model="ruleForm.code"
                type="text"
                prefix-icon="Lock"
                class="inp"
                placeholder="请输入验证码"
              >
                <template #append>
                  <span class="send" @click="onSendInfo">发送短信</span>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
          <el-form-item prop="type">
            <el-checkbox
              class="checked"
              label="true"
              v-model="ruleForm.checkbox"
            >
              记住我
            </el-checkbox>
            <el-checkbox
              label="true"
              class="checked"
              validate-event
              v-model="ruleForm.type"
            >
              <span>我已同意</span>
              <a href="#">《隐私条款》</a>
              和
              <a href="#">《服务条款》</a>
            </el-checkbox>
          </el-form-item>
          <el-button
            class="btn"
            @click="onLogin"
            :disabled="!ruleForm.type"
          >
            登录
          </el-button>
        </div>
        <div class="card-footer">
          <a href="#">
            <img src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png" alt="">
          </a>
          <div>
            <span>忘记密码</span>
            <span>免费注册</span>
          </div>
        </div>

      </el-card>
    </main>
    <footer>
      <my-footer />
    </footer>
  </div>
</template>

<style scope lang="scss">
body {
  margin: 0;
}
.icon {
  vertical-align: middle
}
header {
  box-sizing: border-box;
  display: flex;
  height: 132px;
  width: 100%;
  padding: 0 100px;

  .logo-warp,
  .home-page:hover {
    cursor: pointer;
  }

  .logo-warp {
    width: 200px;
    height: 132px;

  .logo {
      width: 100%;
    }
  }
  .home-page-warp {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;

    .login {
      box-sizing: border-box;
      font-size: 24px;
      color: #666666;
      margin: 16px;
    }
    .home-page {
      text-decoration: none;
      color: #000;

    }
  }

}
main {
  // width: 100%;
  height: 488px;
  box-sizing: border-box;
  background-image: url('http://erabbit.itheima.net/img/login-bg.696efec3.png');
  background-position: center;
  display: flex;
  justify-content: end;
  align-items: center;
  // background-size: cover;
  // background-size: contain;
  background-repeat: no-repeat;

  .box-card {
    box-sizing: border-box;

    border-radius: 0;
    width: 400px;
    // height: 380px;
    margin-right: 100px;


    .card-header {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

      .halving-line {
        color: #eee;
      }
    }

    .card-main {
       box-sizing: border-box;
       padding: 0 20px;
        .inp {
          height: 40px;
        }
        .inp:focus {
          outline: none;
          border: 1px solid #5bb79c;
        }
        .send {
            display: inline-flex;
            width: 30px;
            justify-content: center;
          }
       .info-login {
        box-sizing: border-box;
        text-align: end;
        margin: 16px 0;
        color: #69bea5;
        font-size: 14px;

        :hover {
          cursor: pointer;
        }

        .info-icon {
          margin-right: 5px;
        }
       }


      a {
        color: #2a6495;
        text-decoration: none;
      }

      .btn {
        width: 100%;
        height: 40px;
        border-radius: 0;
        color: #fff;
        background-color: #5bb79c;
      }


    }

    .card-footer {
      box-sizing: border-box;
      display: flex;
      padding: 0 20px;
      color: #aaa;
      margin: 24px 0;
      font-size: 16px;
      justify-content: space-between;

        span {
          margin-left: 5px;
        }

    }
  }
}

  .checked {
    --el-checkbox-checked-input-border-color: green;
    --el-checkbox-checked-bg-color: none;
    --el-checkbox-checked-icon-color: green;
    --el-checkbox-checked-text-color: none
  }
</style>
